import React, { useState } from 'react';
import { Dropdown, InfiniteScroll, List, DotLoading, Tabs } from 'antd-mobile';
import { SearchOutline } from 'antd-mobile-icons';
import './index.less';
import { mockRequest } from './mock-request';
export default () => {
  const [data, setData] = useState([
    {
      id: '1',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
    {
      id: '2',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
    {
      id: '3',
      pic: '/保定华纳婚纱摄影.jpg',
      name: '保定华纳婚纱摄影',
    },
    {
      id: '4',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
  ]);
  const [hasMore, setHasMore] = useState(true);

  async function loadMore() {
    const append = await mockRequest();
    console.log(append);
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }

  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    );
  };
  return (
    <div>
      <Dropdown className="fixsel">
        <Dropdown.Item key="sorter" title="保定城区">
          <div style={{ padding: 12 }}>
            排序内容
            <br />
            排序内容
            <br />
            排序内容
            <br />
            排序内容
            <br />
          </div>
        </Dropdown.Item>
        <Dropdown.Item key="bizop" title="综合排序">
          <div style={{ padding: 12 }}>
            商机筛选内容
            <br />
            商机筛选内容
            <br />
            商机筛选内容
            <br />
          </div>
        </Dropdown.Item>
        <Dropdown.Item key="more" title="筛选">
          <div style={{ padding: 12 }}>
            更多筛选内容
            <br />
            更多筛选内容
            <br />
          </div>
        </Dropdown.Item>
      </Dropdown>

      <div className="content" style={{ paddingTop: '45px' }}>
        <img src={require('../img/报价单.jpg')} alt="" />
        <div className="store">
          <List>
            {data.map((item, index) => (
              <List.Item key={index}>
                <img src={require('../img' + item.pic)} alt="" />
                <span>全国</span>
              </List.Item>
            ))}
          </List>
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
            <InfiniteScrollContent hasMore={hasMore} />
          </InfiniteScroll>
        </div>
      </div>
    </div>
  );
};
